<template>
  <div class="registerbox">
    <p>Register</p>
    <div class="nicknameBox"><input type="text" placeholder="请输入昵称" class="nickname" v-model="register.nick_name" /><br />
    </div>
    <div class="usernameBox"><input type="text" placeholder="请输入账号" class="username" v-model="register.username" /><br />
    </div>
    <div class="passwordBox"><input type="text" placeholder="请输入密码" class="password" v-model="register.password" /><br />
    </div>
    <div class="repasswordBox">
      <input type="text" class="repassword" placeholder="请确认密码" v-model="register.re_password" /><br />
    </div>
    <div class="codeBox">
      <input type="text" class="code" v-model="register.check_code" /><br />
      <div @click="refreshImg"> <img :src="codeimg" alt="" /></div>
    </div>
    <button class="registerBottom" @click="toregister">
      <h3>注&nbsp;册</h3>
    </button><br />
  </div>
</template>
  
<script setup>
import { ref, inject, onMounted } from 'vue';
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const $axios = inject("$axios");
const $store = useStore()
const register = ref({
  nick_name:"",
  username: "",
  password: "",
  re_password: "",
  search_id: "",
  check_code: ""
})

let codeimg = ref();

//注册
function toregister() {
  $axios.post("user/register", register.value)
    .then((resp) => {
      if (resp.data.code === 1000) {
        //浏览器弹出消息
        ElMessage({
          message: "注册成功",
          type: "success",
        });
      } else {
        ElMessage.error(resp.data.msg);
      }
    })
    .catch((err) => {
      console.log(err)
    });
}

// 获取验证码
function refreshImg() {
  $axios
    .get("/common/checkImg")
    .then((resp) => {
      // console.log(resp.data);
      codeimg.value = resp.data.data.b64s;
      register.value.search_id = resp.data.data.search_id;
    })
    .catch((err) => {
      console.log(err);
    });
}
//组件创建
onMounted(() => {
  //验证码
  refreshImg()
})
</script>
  
<style scoped>
.registerbox {
  color: white;
  padding-top: 50px;
}

p {
  text-align: center;
  font-size: 43px;
}

.username,
.password,
.repassword,
.nickname {
  width: 200px;
  height: 30px;
  border: none;
  outline: none;
  font-size: 15px;
  border-radius: 8px;
  padding-left: 10px;
}

::-webkit-input-placeholder {
  font-size: 10px;
  color: rgb(173, 172, 172);
}

.nicknameBox {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 130px;
  transform: translateX(-50%);
}

.nicknameBox::before {
  content: "昵称：";
}


.usernameBox {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 180px;
  transform: translateX(-50%);
}

.usernameBox::before {
  content: "账号：";
}

.passwordBox {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 225px;
  transform: translateX(-50%);
}

.passwordBox::before {
  content: "密码：";
}

.repasswordBox {
  width: 300px;
  position: absolute;
  left: 42%;
  top: 270px;
  transform: translateX(-50%);
}

.repasswordBox::before {
  content: "确认密码：";
}

.codeBox {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 330px;
  transform: translateX(-49%);
}

.codeBox::before {
  content: "验证码：";
}

.codeBox img {
  width: 100px;
  height: 30px;
  position: absolute;
  left: 150px;
  top: 0px;
}

.code {
  width: 60px;
  height: 30px;
  border: none;
  border-radius: 8px;
  padding-left: 10px;
  outline: none;
}

.registerBottom {
  display: block;
  width: 150px;
  height: 40px;
  background-color: white;
  border: none;
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  cursor: pointer;
}

.registerBottom:focus {
  outline: none;
}</style>